<script >
export default {
  data(){
    return{
      msgVisible:false,
      msg:""
    }
  },
  methods:{
      jumpBook(){
        this.$router.push('/admin/book')
      },
      jumpUser(){
        this.$router.push('/admin/user')
      },
      jumpAnnouncement(){
        this.$router.push('/admin/announcement')
      },
      jumpChart(){
        this.$router.push('/admin/chart')
      },
      jumpEdit(){
        this.$router.push('/admin/edit')
      },
      jumpChat(){
        this.$router.push('/admin/chat')
      },
      pushMsg(){
        console.log("发送信息")
        this.msgVisible=true;
        this.msg='';
      },
  }
}
</script>

<template>
  <div class="out">
    <ul>
      <li>
        <img src="../../assets/img/common/logo.png" alt = "logo" class = "logo">
      </li>
      <li class="other">
        <a @click = jumpBook>图书管理</a>
      </li>
      <li class="other">
        <a @click="jumpUser">用户管理</a>
      </li>
      <li class="other">
        <a @click=jumpAnnouncement>公告管理</a>
      </li>
      <li class="other">
        <a @click = jumpChart>数据报表</a>
      </li>
      <li class="other">
        <a @click = jumpEdit>个人中心</a>
      </li >
      <li class="other2" v-on:click="jumpChat" >
        <img src="../../assets/img/common/msg.jpg" alt="msg" class="logo" >
      </li>
    </ul>
    <div class="chat">
      <el-row class="notice-row"><!--文字-读者咨询-->
        读者咨询
      </el-row>
      <el-row class="readerQ"><!--读者咨询-->
        <el-col style="height:100%;width:100%;">
          <el-row class="firstRow">
            用户24123
          </el-row>
          <el-row class="seacondRow"><!--主消息框区域-->
            <el-col style="width:100%;height:100%;">
              <el-row><img  src="../../assets/img/admin/chat1.png" class="zuo"></el-row>
              <el-row><img v-if="msgVisible" src="../../assets/img/admin/chat2.png" class="you"></el-row>
            </el-col>
          </el-row>
          <el-row class="thirdRow">
            <el-col style="height:100%;width:100%;">
              <el-row class="moreRow"><img src="../../assets/img/common/more.jpg" class="moreImg"></el-row>
              <el-row class="input">
                <input class="input-main" v-model="msg">
              </el-row>
              <el-row class="btn-row">
                <button class="pushMsg" @click="pushMsg">发送</button>
              </el-row>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </div>

  </div>

</template>

<style scoped>
.notice-row{
  height:41px;
  width:120px;
  background-color: rgba(143, 175, 185, 0.7);
  margin-top:40px;
  font-size:25px;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top-right-radius: 10px; /* 设置右上角圆角 */
  border-bottom-right-radius: 10px; /* 设置左下角圆角 */
}
.readerQ{
  position: relative;
  top: -60px;
  left: 60px;
  width:60%;
  height:470px;
  background-color: white;
  border-radius: 20px;
  margin: 50px auto 0 auto;
}
.firstRow{
  width:100%;
  height:10%;
  color:rgba(102, 101, 101, 1);
  font-size:18px;
  border-bottom: 1.5px solid rgba(229, 229, 229, 1);
  padding-top:10px;
  padding-left:20px;

}
.seacondRow{
  width:100%;
  height:45%;
  border-bottom: 1.5px solid rgba(229, 229, 229, 1);
  background-color: rgba(250,250,250);
}
.thirdRow{
  width:100%;
  height:40%;
}
.input{
  width:100%;
  height:60%;
}
.input-main{
  border-color: transparent;
  height:50%;
  width:80%;
  outline: none;
  font-size:18px;
}
.btn-row{
  width:100%;
  height:25%;
}
.pushMsg{
  height:40px;
  width:90px;
  background-color: rgba(125, 153, 191, 1);
  color:white;
  font-size:16px;
  letter-spacing: 2px;
  border-radius: 10px;
  border-color: transparent;
  margin-left:750px;
  cursor: pointer;
  position: relative;
  left: -40px;
}
.zuo{
  height:90px;
}
.you{
  height:90px;
  margin-left:340px;
}
.moreRow{
  height:20%;
  width:90%;
}
.moreImg{
  height:100%;
}
ul{
  display: flex;
  background-color: rgb(168,189,203);
  margin: 0;
}
li{
  display: inline-block;
  height: 80%;
  width: 12%;
  padding: 1% 0;
  margin: auto ;
  text-align: center;
}
li.current{
  border-bottom: 5px solid white;
}
li.other:hover{
  cursor: pointer;
  border-bottom: 5px solid white;
}
li.other2:hover{
  cursor: pointer;
  border-bottom: 5px solid rgb(168,189,203);;
}
li>a{
  display: block;
  text-decoration: none;
  font-size: 25px;
  letter-spacing: 5px;
  color: rgba(255, 255, 255, 1);
  font-family: "Arial Black",fantasy;
  margin: 0;
}
.chat{
  width: 1380px;
  height: 500px;
}
.out{
  background-color: rgb(237,237,237);
  width: 100%;
  height: 740px;
}
</style>